<template>
  <div class="search-hot clearFix">
    <div class="small-title">热门搜索</div>

    <HotItem
      v-for="(item, index) in hots"
      :key="index"
      :item="item"
      @click.native="$emit('changeKeyWord', item.first)"
    />
  </div>
</template>

<script>
import HotItem from "@/components/basics/HotItem.vue";
export default {
  components: {
    HotItem,
  },
  data() {
    return {
      hots: [],
    };
  },
  created() {
    // 获取热门搜索
    this.axios.get("/search/hot").then((res) => {
      this.hots = res.data.result.hots;
    });
  },
  props: {
    keywords: String,
  },
};
</script>

<style lang="less" scoped>
.search-hot {
  padding: 10px;

  .small-title {
    color: #797baf;
    font-size: 12px;
    margin-bottom: 10px;
  }
}
</style>
